/*
Initial containing block has width and height set to viewport dimmensions.

html and body have property 'display' set to 'block' value by default so
their width is 100% and it's height is set to auto (fit to conent) by default.

So for html:
width = 100% of width of initial containing block (which is width of the veiwport) - by default
height = 100% of height of initial containing block (which is height of the veiwport) - need to be set
else it would fit it's height to the content.

For body:
width = 100% of width of html (which is width of the html) - by default
height = 100% of height of html (which is height of the html) - need to be set
else it would fit it's height to the content.

It might be not visible when changing background because background-color
is propagated in this way:
body -> html -> initial containing block

With this setting html and body have dimmensions of the viewport
*/
html, body {
	height: 100%;
	margin: 0;
}

#container {
	min-height:100%;
	position:relative;
	background-color: #4b4545;
}

.header {
	background-color: #f69727;
	text-align: center; /* center all inline, inline-block elements inside. It is inherited by elements inside */
}

.header > img {
	width: 100%;
	max-width: 315px;
}

/* It is display: block by default so it adds new line before and after */
.header > nav {
	background-color: #5d5d5d;
}

.header > nav > ul {
	display: inline-block; /* It can have width and height set bu default values are fit to content. No line breaks before and after */
	margin: 10px;
    padding: 0; /* ul has default margins so we remove them */
	color: white;
    list-style-type: none;
	font-family: 'Montserrat', sans-serif;
}

.header > nav ul li {
	display: inline; /* By default is list-item - adds break line after */
	margin: 0 10px;
}

.header > nav ul li a {
	text-decoration: none;
	color: inherit;
	font-family: inherit;
}

.header > nav ul li a:hover {
	background-color: #3f3b3b;
}

@media only screen and (max-width: 600px) {
.header > nav ul li {
	display: block; /* By default is list-item - adds break line after */
	padding: 15px 0;
	/*border-bottom: 2px solid #3f3b3b;*/
}
}

.footer {
    position: absolute;
	bottom: 0;
    height: 200px;
	width: 100%;
	background-color: #5d5d5d;
	color: white;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}

.footer > address {
	padding-top: 10px;
}